<template>
    <div class="home">
        <el-container>
            <el-header
                ><el-menu class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="0">
                        <img src="../assets/logo.png" alt="" class="logo" />
                    </el-menu-item>
                    <el-menu-item index="1" @click="go('Home')">首页</el-menu-item>
                    <el-menu-item index="2" @click="go('List', 2)"
                        >技能</el-menu-item
                    >
                    <el-menu-item index="3" @click="go('List', 3)"
                        >心灵鸡汤</el-menu-item
                    >
                    <el-menu-item index="4" @click="go('List', 4)"
                        >生活</el-menu-item
                    >
                    <el-menu-item index="5" @click="goPhoto('Photo')"
                        >照片</el-menu-item
                    >
                </el-menu>
            </el-header>
            <el-main>
                <el-row type="flex" justify="space-around">
                    <el-col :span="18">
                        <el-card class="mainbox">
                            <div v-if="$route.name === 'Home'">
                                <h1>文章列表</h1>
                                <el-divider></el-divider>
                                <div
                                    v-for="item in articleLists"
                                    :key="item.id"
                                    @click="go('Article', item.id)"
                                >
                                    <article-list :articleData="item" />
                                </div>
                            </div>
                            <div v-else>
                                <router-view />
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="box-card">
                            <h1 class="tit">天山飞虎</h1>
                            <el-divider></el-divider>
                            <div class="peopleInfo">
                                努力学好专业技能，每天进步一点点！
                            </div>
                            <div class="peopleIcon">
                                <i class="el-icon-s-help"></i
                                ><i class="el-icon-star-on"></i>
                            </div>
                        </el-card>
                        <el-card class="smallCard">
                            <span>访问最多</span>
                            <el-divider></el-divider>
                            <div v-for="item in articleLists" :key="item.id"  >
                                <p @click="go('Article', item.id)">{{item.title}}</p>
                            </div>
                        </el-card>
                        <!-- <el-card class="smallCard">
                            <span>hhhh</span>
                            <el-divider></el-divider>
                        </el-card>
                        <el-card class="smallCard">
                            <span>hhhh</span>
                            <el-divider></el-divider>
                        </el-card> -->
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
        <div class="footer">版权归小组所有</div>
    </div>
</template>

<script>
// @ is an alias to /src
import articleList from "@/components/articleList.vue";
import { getArticleList } from "@/api/article";
export default {
    async mounted() {
        this.articleLists = await getArticleList();
        //console.log(this.$route.path);
        //console.log(this.articleLists);
    },
    methods: {
        go(name, id = "") {
            id === ""
                ? this.$router.push("/")
                : this.$router.push({ name: name, query: { id } });
        },
        goPhoto(name) {
            this.$router.push({ name: name});
        }
    },
    name: "Home",
    components: {
        articleList,
    },
    data() {
        return {
            activeIndex: 1,
            articleLists: [
                {
                    id: 243,
                    title: "文章一",
                    articleInfo: "流水落花春去也",
                    createTIme: "2021-4-3 17:07",
                    readNum: 2021,
                    articleType: "洲言",
                },
                {
                    id: 1234,
                    title: "文章er",
                    articleInfo: "真的帅哈哈哈哈哈哈哈哈哈哈哈哈",
                    createTIme: "2021-4-3 17:07",
                    readNum: 2021,
                    articleType: "洲言",
                },
                {
                    id: 75,
                    title: "文章3",
                    articleInfo: "一枝红艳露凝香,云雨巫山枉断肠",
                    createTIme: "2021-4-3 17:07",
                    readNum: 2021,
                    articleType: "洲言",
                },
                {
                    id: 123,
                    title: "wenzhangsi4",
                    articleInfo: "大江东去浪淘尽，千古风流人物",
                    createTIme: "2021-4-3 17:07",
                    readNum: 2021,
                    articleType: "洲言",
                },
            ],
        };
    },
};
</script>
<style lang="less" scoped>

.home {
    background-color: #e9eef3;
    & .el-header,
    .el-footer {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 60px;

        & .logo {
            width: 75px;
            height: 40px;
            margin-left: 80px;
        }
    }

    & .el-main {
        background-color: #e9eef3;
        color: #333;
        line-height: 160px;
        & .box-card {
            width: 300px;
            margin-bottom: 12px;
            & div:nth-child(3) {
                display: flex;
                & span {
                    justify-content: space-around;
                }
            }
            & span {
                font-size: 18px;
            }

            & .tit {
                text-align: center;
                margin: 8px auto;
            }
            & .peopleInfo {
                padding-top: 10px;
            }
            & .peopleIcon {
                text-align: center;
                padding-top: 10px;
                font-size: 45px;
            }
        }
        & .mainbox {
            width: 90%;
            margin: 0 80px;
        }
        & .smallCard {
            margin-bottom: 12px;
            width: 300px;
            font-size: 20px;
            text-align: center;

            & p {
                cursor: pointer;
                text-align: left;
                font-size: 16px;
                line-height: 24px;
            }
        }
    }
    & .el-main[data-v-fae5bece] {
        line-height: 0;
    }
    & .footer {
        text-align: center;
        background-color: #e4f7ec;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
    }
    /*  */
}
body > .el-container {
    margin-bottom: 0px;
}
.home .el-main[data-v-fae5bece][data-v-fae5bece] {
    line-height: 20px;
}

.el-divider--horizontal {
    margin-top: 20px;
    margin-bottom: 0;
}
a {
    text-decoration: none;
}
</style>
